/*
 * @Author: your name
 * @Date: 2020-09-08 20:11:17
 * @LastEditTime: 2020-09-22 11:12:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \PipeOneMap_WebClient\src\app\business\pipe-statistics\component\g2-stiff\g2-stiff.component.ts
 */
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
import DataSet from '@antv/data-set';
@Component({
  selector: 'app-g2-stiff',
  templateUrl: './g2-stiff.component.html',
  styleUrls: ['./g2-stiff.component.scss']
})
export class G2StiffComponent implements OnInit, OnChanges {

  @Input() data = null;
  id = uuidv4();
  charts = null;
  constructor() { }

  ngOnInit() {
  }
  configureChart(chart) {
    // if (this.charts) {
    //   this.charts.destory();
    // }
    this.charts = chart;
    const data = this.data.map((value) => {
      return {
        value,
      };
    });
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'bin.histogram',
      field: 'value',
      binWidth: 2,
      as: ['value', 'count'],
    });
    this.charts.data(dv.rows);
    this.charts.scale({
      value: {
        min: 0,
        tickInterval: 2,
      },
      count: {
        max: 14,
        nice: true,
      },
    });
    this.charts.tooltip({
      showMarkers: false,
      position: 'top',
    });
    this.charts.interval().position('value*count').size(26);
    this.charts.interaction('element-highlight');
    this.charts.render();
  }
  ngOnChanges() {
    if (this.charts){
      this.charts.changeData(this.data);
      this.charts.render();
    }
  }

}
